<template>
<div>

    <div class="leftMenu">
        <el-row class="tac">          
            <el-col :span="12">
                <!-- <h5>自定义颜色</h5> -->
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="0" disabled>
                        <i class="el-icon-document" style="paddingTop:18px"></i>
                        <span slot="title">知识体系总结-视频篇</span>
                    </el-menu-item>
                    
                    <el-submenu index="1">


                        

                        <template slot="title">
                            <!-- <i class="el-icon-location"></i> -->
                            <span>Vue</span>
                        </template>

                        <el-menu-item-group>
                            <template slot="title">Vue Basic</template>
                            <el-submenu index="1-4">
                            <template slot="title">1.组件间通信 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </template>
                            <el-menu-item index="1-4-1">
                              <li @click="handleClick(0)">1.1属性传值</li>
                              
                              </el-menu-item>
                        </el-submenu>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>


                        <el-menu-item-group title="Vue Senior">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>


                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>


                    </el-submenu>



                    <el-menu-item index="2">
                        <!-- <i class="el-icon-menu"></i> -->
                        <span slot="title">
                          <li @click="handleClick(1)">测试(华晨宇)</li>
                          </span>
                    </el-menu-item>



                    <el-menu-item index="3" disabled>
                        <!-- <i class="el-icon-document"></i> -->
                        <span slot="title">导航三</span>
                    </el-menu-item>



                    <el-menu-item index="4">
                        <!-- <i class="el-icon-setting"></i> -->
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>

    <div class="video">
        <videoCom></videoCom>
    </div>

</div>
</template>



<style scoped>
.leftMenu {
  position: absolute;
    width: 300px;
    /* float: left; */
}
.video{
  width: 1000px; 
  height: 500px;
   margin-left: 240px; 
  /* display:none; */
}
</style>

</script>
<script>
import videoCom from '../components/Html5Video/video.vue'

// 过滤和树形组件
export default {
    components: {
        videoCom
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClick(num){
          var childrenCom = this.$children;
          for(var i = 0;i < childrenCom.length;i++){
            if(childrenCom[i].$el.className == 'video_player'){
                 childrenCom[i].changeVideo(num)
                childrenCom[i].bindEvent()
            }
          }
          // console.log(this.$children[1].$el.className)
        }
    }

};
</script>
